<template>
  <a-form label-align="left" :label-col="{ span: 4 }">
    <a-form-item label="ID">
      <a-input v-model:value="pen.id" @blur="onUpdatePen" />
    </a-form-item>
    <a-form-item label="名称">
      <a-input v-model:value="pen.name" @blur="onUpdatePen" />
    </a-form-item>
  </a-form>
  <a-collapse v-model:activeKey="activeKey" size="small" expand-icon-position="right">
    <a-collapse-panel :key="1" :forceRender="true" header="Tag标签">
      <a-form label-align="left" class="data-value-form">
        <template v-if="pen['tags'].length !== 0">
          <a-form-item>
            <div class="flex flex-wrap">
              <template v-for="(vo, idx) in pen.tags" :key="idx">
                <a-tag>
                  <template #icon>
                    {{ vo }}
                    <CloseOutlined @click="onClosePenTag(idx)" />
                  </template>
                </a-tag>
              </template>
            </div>
          </a-form-item>
        </template>
        <a-form-item>
          <a-input v-model:value="tags.text" @keyup.enter="addPenTags" placeholder="按回车添加(最大长度100)" />
        </a-form-item>
      </a-form>
    </a-collapse-panel>
    <a-collapse-panel :key="2" :forceRender="true" header="数据">
      <a-form label-align="left" :label-col="{ span: 10 }" class="data-value-form">
        <template v-if="pen.form !== undefined && pen.form.length !== 0">
          <template v-for="(vo, idx) in pen.form" :key="idx">
            <a-form-item :label="vo.name">
              <div class="flex items-center justify-between">
                <template v-if="vo.type == 'text'">
                  <a-input v-model:value="pen[vo.key]" @change="getDataValue(vo.key, pen[vo.key])" style="width: 100%" />
                </template>
                <template v-else-if="vo.type == 'number'">
                  <a-input-number v-model:value="pen[vo.key]" style="flex: 1" @change="getDataValue(vo.key, pen[vo.key])" />
                </template>
                <template v-else-if="vo.type == 'switch'">
                  <a-switch v-model:checked="pen[vo.key]" />
                </template>
                <template v-else-if="vo.type == 'code'">
                  <a-button size="small" @click="openEditContainer(vo, idx)">...</a-button>
                </template>
                <template v-else-if="vo.type == 'slider'">
                  <a-slider
                    v-model:value="pen[vo.key]"
                    :min="vo.min"
                    :max="vo.max"
                    :step="vo.step"
                    @change="getDataValue(vo.key, pen[vo.key])"
                    style="flex: 1"
                  />
                </template>
                <div class="flex variable" style="flex: 1">
                  <LinkOutlined title="绑定变量" @click="openVariable(vo, idx)" />
                  <DeleteOutlined title="删除" @click="onDeleteData(vo, idx)" />
                </div>
              </div>
              <template v-if="vo.dataIds.dataId !== ''">
                <div class="flex items-center justify-between data-id">
                  <span>{{ vo.dataIds.dataId }}</span>
                  <DeleteOutlined title="删除" @click="onDeleteDataIds(vo, idx)" />
                </div>
              </template>
            </a-form-item>
          </template>
          <a-form-item>
            <a-button @click="onAdd" style="width: 100%">
              <template #icon>
                <PlusOutlined />
              </template>
              <span>新增</span>
            </a-button>
          </a-form-item>
        </template>
        <template v-else>
          <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE">
            <template #description>
              <span>
                暂无数据，
                <a @click="onAdd">添加</a>
              </span>
            </template>
          </a-empty>
        </template>
      </a-form>
    </a-collapse-panel>
    <template v-if="pen['dropdownList']">
      <a-collapse-panel :key="3" :forceRender="true" header="下拉列表">
        <div class="dropdown-list">
          <ul>
            <template v-for="(vo, idx) in pen['dropdownList']" :key="idx">
              <li class="flex items-center justify-between">
                <span :title="vo.text">{{ vo.text }}</span>
                <span>
                  <a-button type="link" size="small" title="编辑" @click="onEditSelect(idx)">
                    <template #icon>
                      <EditOutlined />
                    </template>
                  </a-button>
                  <a-button type="link" size="small" @click="onDeleteSelectData(vo, idx)" title="删除" danger>
                    <template #icon>
                      <DeleteOutlined />
                    </template>
                  </a-button>
                </span>
              </li>
            </template>
          </ul>
          <a-button @click="onAddSelect" style="width: 100%">
            <template #icon>
              <PlusOutlined />
            </template>
            <span>新增</span>
          </a-button>
        </div>
      </a-collapse-panel>
    </template>
  </a-collapse>
  <DataDrawer ref="dataDrawerRef" @oks="getDataDrawer" />
  <SelectForm ref="selectFormRef" @oks="getSelectFormData" />
  <VariableModal ref="variableModalRef" @oks="getDataId" />
</template>

<script lang="ts" setup>
import { ref, watch, defineComponent, nextTick, getCurrentInstance } from 'vue';
import { CloseOutlined, EditOutlined, DeleteOutlined, LinkOutlined, PlusOutlined } from '@ant-design/icons-vue';
import { useSelection } from '@/services/selections';
import { storeToRefs } from 'pinia';
import { useRouterStore } from '@/store/router';

import { Empty, message } from 'ant-design-vue';
import DataDrawer from '../components/dataDrawer.vue';
import VariableModal from '../components/variable.vue';
// import SelectForm from './components/selectForm.vue';
import SelectForm from '../components/selectForm.vue';
import { couldStartTrivia } from 'typescript';

let dataIndex = -1;
const emit = defineEmits<{
    (event: 'oks'): void,
    (event: 'getDataValue'): void,
    (event: 'deleteDataValue'): void
}>();

const { selections } = useSelection();
const routerStore = useRouterStore();
const { activeProjectList } = storeToRefs(routerStore);

const pen = ref<any>();
const dataDrawerRef = ref()
const selectFormRef = ref()
const variableModalRef = ref()

// const { meta2dDatas } = storeToRefs(canvasStore);
let activeKey = ref([1, 2]);
let tags = ref({text: ''});

const init = (_: any) => {
    pen.value = {
        tags: [],
    };
    Object.assign(pen.value, {
        ..._,
    });
    console.log('pen.value__', pen.value);
}

watch(
    () => selections.pen,
    (val) => {
        console.log(val);
        init(val);
    },
    { immediate: true }
);

const onUpdatePen = () => {
    Object.assign(pen.value, {
        ...pen.value,
    });
}
const onClosePenTag = (idx: number) => {
      pen.value['tags'].splice(idx, 1);
      Object.assign(pen.value, {
        ...pen.value,
    });
}
const addPenTags = () => {
    if (tags.value['text'] == '') {
        message.warning('文本不能为空');
        return false;
    }
    pen.value['tags'].push(tags.value['text']);
    tags.value['text'] = '';
    Object.assign(pen.value, {
        ...pen.value,
    });
}
const getDataValue = (k, v) => {
    Object.assign(pen.value, {
        [k]: v,
    });
}
//打开代码编辑器
const openEditContainer = (data, index) => {
    console.log(data, index);
    //   proxy.$refs.editContainer.visible = true;
    //   dataIndex = index;
    //   nextTick(() => {
    //     let _ = pen[data.key];
    //     proxy.$refs.editContainer.init(_ ? _ : '');
    //   });
}

//打开变量弹窗
const openVariable = (data, index) => {
    console.log('data', data)
    console.log('index', index)

    // const _apiUrlObj = activeProjectList.value.properties.find(item => item.name === 'apiUrl');
    // if(!_apiUrlObj) {
    //     message.warning('请先配置apiUrl');
    //     return false;
    // }
    // dataIndex = index;
    // variableModalRef.value.showModal();
    
};
//删除数据项
const onDeleteData = (data, idx) => {
    pen.value.form.splice(idx, 1);
    delete pen.value[data.key];
    // meta2dDatas.value = data;
    // localStorage.setItem("meta2d", JSON.stringify(meta2d.data()));
}
const onDeleteDataIds = (vo, idx) =>{
    pen.value.form[idx].dataIds = {
        dataId: '',
        name: '',
    };
}
const onAdd = () =>{
    // proxy.$refs.dataDrawer.visible = true;
    dataDrawerRef.value.showModal(true);
}
const getDataDrawer = (model) => {
      console.log("model ====> ", model)
      if (!pen.value['form']) {
        pen.value['form'] = [];
      }
      console.log("pen ==> ", pen)
      console.log("pen.form1 ==> ", pen.value['form'])
      switch (model.type) {
        case 'text':
          pen.value[model.key] = '';
          break;
        case 'switch':
          pen.value[model.key] = true;
          break;
        case 'number':
          pen.value[model.key] = model.min;
          break;
      }
      console.log("pen.form2 ==> ", pen.value['form'])
      
      console.log("pen ==> ", pen)

      console.log("pen.value.form ==> ", pen.value.form)


      // pen.value.form.push({
      //   ...model,
      //   dataIds: {
      //     dataId: model.key,
      //     // name: '',
      //   },
      // });

      // TODO 先找一下里边有没有key为text的，有更新，没有push
      pen.value.form.push( {
        key: 'text',
        dataIds: {
          dataId: model.key,
          // name: '',
        },
      })

      // pen.value.form[0].dataIds.dataId = model.key
      console.log("pen22 ==> ", pen)
      
      console.log("pen.value.form ==> ", pen.value.form)
      Object.assign(pen.value, {
            ...pen.value,
      });
    }
const onEditSelect = (idx) => {
    selectFormRef.value.showModal(false, pen.value['dropdownList'][idx], idx);
    // proxy.$refs.selectForm.visible = true;
    // nextTick(() => {
    //     proxy.$refs.selectForm.init(pen.value['dropdownList'][idx], idx);
    // });
}
const onDeleteSelectData = (data, index) =>{
    pen.value['dropdownList'].splice(index, 1);
}
const onAddSelect = () => {
    // proxy.$refs.selectForm.visible = true;
    selectFormRef.value.showModal(true);
}

const getSelectFormData = (data, idx) => {
    if (idx !== '') {
        pen.value['dropdownList'][idx] = data;
    } else {
        pen.value['dropdownList'].push(data);
    }
}

//获取绑定变量ID
const getDataId = (e) => {
    let { id, name } = e;
    Object.assign(pen.value.form[dataIndex], {
        dataIds: {
            dataId: id,
            name,
        },
    });
    dataIndex = -1;
}
</script>

<style lang="scss" scoped>
.ant-collapse {
  .data-value-form {
    .ant-form-item {
      margin-bottom: 12px;
      .ant-tag {
        padding: 0 0px 0 6px;
        margin: 0 6px 6px 0;
      }
      &:last-child {
        margin-bottom: 0;
      }
      .data-id {
        margin: 6px 0 0;
      }
      &:last-child {
        margin-bottom: 0;
      }
      .ant-slider {
        flex: 1;
      }
      .variable {
        .anticon-link,
        .anticon-delete {
          width: 25px;
        }
      }
    }
  }
  .dropdown-list {
    ul {
      padding: 0;
      margin: 0 0 12px;
      li {
        height: 30px;
        border-bottom: 1px solid #f0f0f0;
        box-sizing: border-box;
        line-height: 30px;
        &:last-child {
          border: none;
        }
      }
    }
  }
}
</style>